<template>
  <div class="wrap-tops">
    <Top></Top>
    <!-- 中间 -->
    <div class="wrap-account">
      <p class="title-center">账号设置</p>
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane label="手机号码" name="first">
          <!-- 修改手机号 -->
          <div class="phone-box">
            <p class="phone-title">当前绑定手机号码
              <span>189*****8512</span>
            </p>
            <div class="wrap-input">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="当前绑定的手机号" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入当前绑定的手机号"></el-input>
                </el-form-item>
                <el-form-item label="新手机号" prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="请输入新的手机号"></el-input>
                </el-form-item>
                <div class="i-box">
                  <input class="i-input" type="text" placeholder="请输入验证码">
                  <button class="i-tip" @click="yan" :disabled="disabled">{{count}}</button>
                </div>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">确定更改</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="设置密码" name="second">
          <!-- 设置密码 -->
          <div class="phone-box">
            <p class="phone-title">当前绑定手机号码
              <span>189*****8512</span>
            </p>
            <div class="wrap-input">
              <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pass">
                  <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>
                  <el-button @click="resetForm2('ruleForm2')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="隐私设置" name="third">
          <!-- 隐私设置 -->
          <div class="phone-box">
            <p class="phone-title">隐藏简历设置
            </p>
            <div class="hide-box">
              <span>对boss隐藏简历</span>
              <el-switch v-model="hide" active-color="#ccc" inactive-color="#00bfff">
              </el-switch>
            </div>
            <div class="hide-box">
              <span>对人才经纪人隐藏</span>
              <el-switch v-model="hide2" active-color="#ccc" inactive-color="#00bfff">
              </el-switch>
            </div>
            <div class="hid-firm">
              <div class="dis-hid">
                <span>屏蔽公司 </span>
                <span class="el-icon-circle-plus-outline dis-hid-title" @click="pin">添加屏蔽公司 </span>
              </div>
              <div class="pingbi">
                <p>您现在还没有屏蔽公司</p>
              </div>
            </div>
            <el-dialog title="添加屏蔽公司" :visible.sync="dialogVisible" width="30%">
              <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="input2">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div class="title-ts">可通过以下方式搜索公司</div>
              <ol class="hid-list">
                <li>公司全称:如北京华品博睿网络技术有限公司”</li>
                <li>公司简称:如"BOSS直聘”</li>
                <li>企业邮箱后缀:如“kanzhun. com”</li>
              </ol>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">屏蔽所选公司</el-button>
              </span>
            </el-dialog>

          </div>
        </el-tab-pane>
        <el-tab-pane label="绑定微信号" name="third2">
          <!-- 绑定微信号 -->
          <div class="phone-box">
            <p class="phone-title">当前绑定手机号码
              <span>189*****8512</span>
            </p>
            <div class="weixin-title">绑定微信后，可以使用微信账号或者直聘账号2种方式登录
            </div>
            <div class="weixin-box">
              <span class="weixins1">
                <span class="weixins iconfont icon-weixin"></span>
                <span>微信登陆 </span>
              </span>
              <span>解绑</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <bottom></bottom>
  </div>

</template>
<script>
import Top from "./top";
import bottom from "./bottom";

export default {
  components: { Top, bottom },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      hide: "",
      hide2: "",
      count: "获取验证码",
      show: true,
      activeName: "first",
      disabled: false,
      dialogVisible: false,
      input2: "",
      ruleForm: {
        name: "",
        phone: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入当前绑定的手机号",
            trigger: "blur"
          },
          { min: 6, max: 11, message: "长度在 6 到 11 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入新手机号", trigger: "blur" },
          { min: 6, max: 11, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      t: "",
      ruleForm2: {
        pass: "",
        checkPass: ""
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    // 获取验证码
    yan() {
      this.disabled = true;
      let time = 60;
      let a = setInterval(() => {
        time--;
        this.count = "已发送 " + time + "  s";

        if (time == 0) {
          clearInterval(a);
          this.disabled = false;
          this.count = "重新获取验证码";
        }
      }, 1000);
    },
    pin() {
      this.dialogVisible = true;
    },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm2(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
/* 隐藏设置 */
.hide-box {
  margin: 20px 0px;
}
.weixin-box {
  display: flex;
  justify-content: space-between;
}
.weixins {
  font-size: 20px;
  color: #00bfff;
}
.title-ts {
  margin: 20px 0px;
  margin-bottom: 16px;
  font-size: 14px;
  color: rgba(65, 74, 96, 0.85);
  line-height: 24px;
}
.hide-box span {
  margin-right: 60px;
}
.hid-firm {
  border-top: 1px solid #ccc;
  margin-top: 50px;
}
.hid-list li {
  font-size: 12px;
  color: #8d92a1;
  line-height: 24px;
}
.dis-hid {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}
.dis-hid-title {
  color: #00bfff;
  cursor: pointer;
}
.pingbi p {
  font-size: 14px;
  color: #495060;
}
.weixin-title {
  color: #9fa3b0;
  font-size: 14px;
  margin: 60px 0px;
}
/* 手机号码 */
.phone-title {
  color: #495060;
}
.phone-title span {
  margin-left: 30px;
  color: #ccc;
}
.phone-box {
  padding: 10px 40px;
  min-height: 400px;
  box-sizing: border-box;
  background: #fff;
}
.wrap-input {
  max-width: 600px;
}
.i-input {
  width: 54.5%;
  height: 35px;
  padding-left: 10px;
  box-sizing: border-box;
}
.i-box {
  text-align: right;
  margin-bottom: 35px;
}
.i-tip {
  width: 20%;
  height: 35px;
  border: none;
  background: #00bfff;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.wrap-tops {
  background: #fafafa;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.title-center {
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #00bfff;
}
.wrap-account {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 25px;
  overflow: hidden;
}
</style>
